﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>LiveChat Starter Kit</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Dominic St-Pierre">

    <!-- Le styles -->

    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }

        .sidebar-nav {
            padding: 9px 0;
        }

        .chat-session {
            padding: 3px 3px 3px 3px;
            height: 65px;
            border-bottom: 1px solid #000;
            cursor: pointer;
        }

            .chat-session.active {
                background-color: lightgray;
                cursor: default;
            }

        .chat-msgs {
            height: 650px;
            padding: 3px 3px 3px 3px;
            border: 3px dashed lightgray;
            margin-bottom: 10px;
            overflow-y: auto;
        }
    </style>
</head>

<body>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">LCSK - Agent Panel</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#" id="show-real-time-visits">Show Real Time Visits</a></li>
                    <li><a href="#" id="show-internal-chat">Internal Agent Chat <span class="badge">...</span></a></li>
                </ul>
                <p class="navbar-text navbar-right">
                    Logged in as <a href="#" id="change-status" class="navbar-link"></a>
                </p>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="well sidebar-nav">
                    <h3>Chat Sessions</h3>
                    <div id="chat-sessions">
                    </div>
                </div>
                <!--/.well -->
            </div>
            <!--/span-->
            <div id="chat-content" class="col-md-9">
                <div id="login">
                    <h2>Log In to Start Accepting Chat Requests</h2>
                    <div id="login-alerts"></div>
                    <fieldset>
                        <legend>Enter your agent name and password</legend>
                        <p>
                            <label>Agent Name</label>
                            <input id="login-name" type="text" class="form-control" placeholder="agent name">
                        </p>
                        <p>
                            <label>Agent Password</label>
                            <input id="login-pass" class="form-control" type="password">
                        </p>
                        <br />
                        <button id="login-btn" type="submit" class="btn btn-primary btn-medium">Start accepting chat ></button>
                    </fieldset>
                </div>
                <div id="agent-chat">
                    <div id="real-time-visits">
                        <h2>Real time visits</h2>
                        <table id="current-visits" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Requested on</th>
                                    <th>Page</th>
                                    <th>Referrer</th>
                                    <th>In Chat</th>
                                    <th>Invite</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="all-chatbox">
                        <div id="chatmsgsinternal" class="chat-msgs"></div>
                    </div>
                    <div id="chat-controls" class="row">
                        <div class="col-md-10">
                            <input id="post-msg" type="text" class="form-control" placeholder="Enter your text here. Enter /list for a list of available commands" />
                        </div>
                        <div class="col-md-2">
                            <button id="post-btn" class="btn btn-primary">Send</button>
                        </div>
                    </div>


                </div>
            </div>
            <!--/span-->
        </div>
        <!--/row-->

        <hr>

        <footer>
            <p>LiveChat Starter Kit by <a href="http://www.dominicstpierre.net">Dominic St-Pierre</a> - free open source live chat / live support app available here <a href="http://livechatstarterkit.codeplex.com">http://livechatstarterkit.codeplex.com</a></p>
        </footer>

    </div>
    <!--/.fluid-container-->

    <div id="modal-cmd" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="cmdLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3>Available commands</h3>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script src="assets/js/jquery-1.7.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>

    <script src="assets/js/jquery.timeago.js" type="text/javascript"></script>

    <script src="assets/js/jquery.signalR-2.0.1.min.js" type="text/javascript"></script>
    <script src="/signalr/hubs" type="text/javascript"></script>
    <script src="agent.js" type="text/javascript"></script>

</body>
</html>
